<template>
  <div class="filter-comp">
    <van-search
      v-model="filterForm.zhName"
      placeholder="请输入客户或品牌名称"
      shape="round"
      background="#fff"
      @search="onSearch"
    />
    <SelectPicker
      v-model="filterForm.entType"
      :columns="ent_type"
      placeholder="企业性质"
    />
    <SelectPicker
      v-model="filterForm.customType"
      :columns="custom_type"
      placeholder="客户类型"
      @update:modelValue="changeCustomType"
    />
    <SelectPicker
      v-if="filterForm.customType === '1'"
      v-model="filterForm.companyType"
      :columns="company_type"
      placeholder="展商类别"
      @update:modelValue="changeCompanyType"
    />
    <van-row>
      <van-field v-model="filterForm.province" placeholder="所属地区" />
    </van-row>
    <template v-if="filterForm.companyType === '3'">
      <van-row>
        <van-col span="12">
          <van-field
            v-model="filterForm.areaCoveredStart"
            placeholder="开始面积"
          />
        </van-col>
        <van-col span="12">
          <van-field
            v-model="filterForm.areaCoveredEnd"
            placeholder="截止面积"
          />
        </van-col>
      </van-row>
      <van-row>
        <van-col span="12">
          <van-field
            v-model="filterForm.researchStaffNumStart"
            placeholder="研发人员数开始"
          />
        </van-col>
        <van-col span="12">
          <van-field
            v-model="filterForm.researchStaffNumEnd"
            placeholder="研发人员数截止"
          />
        </van-col>
      </van-row>
      <van-row>
        <van-col span="12">
          <van-field
            v-model="filterForm.annualValueStart"
            placeholder="年产值开始"
          />
        </van-col>
        <van-col span="12">
          <van-field
            v-model="filterForm.annualValueEnd"
            placeholder="年产值截止"
          />
        </van-col>
      </van-row>
    </template>

    <div class="filter-op" v-if="filterForm.companyType">
      <van-button
        round
        icon="arrow-down"
        size="small"
        type="default"
        @click="showPicker = true"
        >筛选</van-button
      >
    </div>

    <van-popup
      v-model:show="showPicker"
      position="bottom"
      round
      :close-on-click-overlay="false"
    >
      <div class="filter-btn">
        <div class="clear-btn" @click="clearBtn">清空</div>
        <div class="title">筛选</div>
        <div class="confirm-btn" @click="confirmBtn">确认</div>
      </div>
      <div class="filter-popup">
        <template v-if="['1', '2'].includes(filterForm.companyType)">
          <div class="classify-box">
            <div class="classify-label">招商渠道</div>
            <div class="classify-main">
              <div
                :class="[
                  'classify-item',
                  channelsFlag === item.dictType ? 'active' : ''
                ]"
                v-for="(item, index) of channelsData"
                :key="index"
                @click="selectChannelsItem(item)"
              >
                {{ item.dictLabel }}
              </div>
            </div>
          </div>

          <div class="classify-box" v-if="oneChannelsData.length">
            <div class="classify-label">合作方式</div>
            <div class="classify-main">
              <div
                :class="[
                  'classify-item',
                  channelsOneFlag === item.dictLabel ? 'active' : ''
                ]"
                v-for="(item, index) of oneChannelsData"
                :key="index"
                @click="selectOneChannelsItem(item)"
              >
                {{ item.dictLabel }}
              </div>
            </div>
          </div>

          <div class="classify-box" v-if="twoChannelsData.length">
            <div class="classify-label">地区</div>
            <div class="classify-main">
              <div
                :class="[
                  'classify-item',
                  channelsTwoFlag === item.dictLabel ? 'active' : ''
                ]"
                v-for="(item, index) of twoChannelsData"
                :key="index"
                @click="selectTwoChannelsItem(item)"
              >
                {{ item.dictLabel }}
              </div>
            </div>
          </div>

          <div class="classify-box" v-if="threeChannelsData.length">
            <div class="classify-label">省份</div>
            <div class="classify-main">
              <div
                :class="[
                  'classify-item',
                  channelsThreeFlag === item.dictLabel ? 'active' : ''
                ]"
                v-for="(item, index) of threeChannelsData"
                :key="index"
                @click="selectThreeChannelsItem(item)"
              >
                {{ item.dictLabel }}
              </div>
            </div>
          </div>
        </template>

        <template v-if="filterForm.companyType">
          <div class="classify-box">
            <div class="classify-label">一级品类</div>
            <div class="classify-main">
              <div
                :class="[
                  'classify-item',
                  categoryOneFlag.includes(item.dictValue) ? 'active' : ''
                ]"
                v-for="(item, index) of categoryOneData"
                :key="index"
                @click="selectOneCategoryItem(item)"
              >
                {{ item.dictLabel }}
              </div>
            </div>
          </div>

          <div class="classify-box" v-if="categoryTwoData.length">
            <div class="classify-label">二级品类</div>
            <div class="classify-main">
              <div
                :class="[
                  'classify-item',
                  categoryTwoFlag.includes(item.dictValue) ? 'active' : ''
                ]"
                v-for="(item, index) of categoryTwoData"
                :key="index"
                @click="selectTwoCategoryItem(item)"
              >
                {{ item.dictLabel }}
              </div>
            </div>
          </div>
        </template>
      </div>
    </van-popup>
  </div>
</template>

<script setup lang="ts" name="FilterComp">
import { computed, ref } from "vue";
import { dictListAll } from "@/api/dict";
import SelectPicker from "@/components/selectPicker/index.vue";

const emits = defineEmits(["search"]);
const initForm = () => {
  return {
    zhName: "",
    entType: "",
    customType: "",
    companyType: "",
    province: "",
    areaCoveredStart: "",
    areaCoveredEnd: "",
    researchStaffNumStart: "",
    researchStaffNumEnd: "",
    annualValueStart: "",
    annualValueEnd: "",
    channelsType: "",
    channelsOne: "",
    channelsTwo: "",
    channelsThree: "",
    oneCategory: "",
    twoCategory: ""
  };
};
const filterForm = ref(initForm());
const showPicker = ref(false);
const ent_type = ref<Record<string, any>[]>([]);
const custom_type = ref<Record<string, any>[]>([]);
const company_type = ref<Record<string, any>[]>([]);
const storeChannels = ref<Record<string, any>[]>([]);
const agencyChannels = ref<Record<string, any>[]>([]);
const channelsFlag = ref("");
const channelsOneFlag = ref("");
const channelsTwoFlag = ref("");
const channelsThreeFlag = ref("");
const channelsData = computed(() => {
  return [
    {
      type: "0",
      createTime: "2024-07-05 00:13:28",
      cssClass: "26",
      dictCode: 0,
      dictLabel: "门店渠道",
      dictSort: 1,
      dictType: "store_channels",
      dictValue: "01",
      isDefault: "N",
      listClass: null,
      parentCode: 0,
      remark: null,
      sysDictDataVoList: storeChannels.value || []
    },
    {
      type: "0",
      createTime: "2024-07-05 00:13:28",
      cssClass: "26",
      dictCode: 0,
      dictLabel: "代理渠道",
      dictSort: 1,
      dictType: "agency_channels",
      dictValue: "02",
      isDefault: "N",
      listClass: null,
      parentCode: 0,
      remark: null,
      sysDictDataVoList: agencyChannels.value || []
    }
  ];
});
const oneChannelsData = ref<Record<string, any>[]>([]);
const twoChannelsData = ref<Record<string, any>[]>([]);
const threeChannelsData = ref<Record<string, any>[]>([]);
const dailyCategory = ref<Record<string, any>[]>([]);
const majorCategory = ref<Record<string, any>[]>([]);
const factoryCategory = ref<Record<string, any>[]>([]);
const providerCategory = ref<Record<string, any>[]>([]);
const talentOrgCategory = ref<Record<string, any>[]>([]);
const categoryOneData = ref<Record<string, any>[]>([]);
const categoryTwoData = ref<Record<string, any>[]>([]);
const categoryOneFlag = ref<string[]>([]);
const categoryTwoFlag = ref<string[]>([]);

function changeCustomType() {
  filterForm.value.companyType = "";
  changeCompanyType("");
  clearBtn();
}

function changeCompanyType(val: string) {
  onSearch();
  channelsFlag.value = "";
  oneChannelsData.value = [];
  twoChannelsData.value = [];
  threeChannelsData.value = [];
  channelsOneFlag.value = "";
  channelsTwoFlag.value = "";
  channelsThreeFlag.value = "";

  filterForm.value.areaCoveredStart = "";
  filterForm.value.areaCoveredEnd = "";
  filterForm.value.researchStaffNumStart = "";
  filterForm.value.researchStaffNumEnd = "";
  filterForm.value.annualValueStart = "";
  filterForm.value.annualValueEnd = "";

  categoryOneFlag.value = [];
  categoryTwoFlag.value = [];
  categoryOneData.value = [];
  categoryTwoData.value = [];
  if (val === "1") categoryOneData.value = dailyCategory.value;
  if (val === "2") categoryOneData.value = majorCategory.value;
  if (val === "3") categoryOneData.value = factoryCategory.value;
  if (val === "4") categoryOneData.value = providerCategory.value;
  if (val === "5") categoryOneData.value = talentOrgCategory.value;
}

function selectChannelsItem(item: any) {
  channelsFlag.value =
    channelsFlag.value === item.dictType ? "" : item.dictType;
  oneChannelsData.value = channelsFlag.value
    ? item.sysDictDataVoList || []
    : [];

  channelsOneFlag.value = "";
  channelsTwoFlag.value = "";
  channelsThreeFlag.value = "";
  twoChannelsData.value = [];
  threeChannelsData.value = [];
}

function selectOneChannelsItem(item: any) {
  channelsOneFlag.value =
    channelsOneFlag.value === item.dictLabel ? "" : item.dictLabel;
  twoChannelsData.value = channelsOneFlag.value
    ? item.sysDictDataVoList || []
    : [];

  channelsTwoFlag.value = "";
  channelsThreeFlag.value = "";
  threeChannelsData.value = [];
}

function selectTwoChannelsItem(item: any) {
  channelsTwoFlag.value =
    channelsTwoFlag.value === item.dictLabel ? "" : item.dictLabel;
  threeChannelsData.value = channelsTwoFlag.value
    ? item.sysDictDataVoList || []
    : [];

  channelsThreeFlag.value = "";
}

function selectThreeChannelsItem(item: any) {
  channelsThreeFlag.value =
    channelsThreeFlag.value === item.dictLabel ? "" : item.dictLabel;
}

function selectOneCategoryItem(item: any) {
  if (categoryOneFlag.value.includes(item.dictValue)) {
    categoryOneFlag.value = categoryOneFlag.value.filter(
      sItem => sItem !== item.dictValue
    );
  } else {
    categoryOneFlag.value.push(item.dictValue);
  }
  categoryTwoFlag.value = [];
  categoryTwoData.value = [];
  categoryOneData.value.forEach((sItem: any) => {
    if (
      categoryOneFlag.value.includes(sItem.dictValue) &&
      sItem.sysDictDataVoList
    ) {
      categoryTwoData.value.push(...sItem.sysDictDataVoList);
    }
  });
}

function selectTwoCategoryItem(item: any) {
  if (categoryTwoFlag.value.includes(item.dictValue)) {
    categoryTwoFlag.value = categoryTwoFlag.value.filter(
      sItem => sItem !== item.dictValue
    );
  } else {
    categoryTwoFlag.value.push(item.dictValue);
  }
}

function clearBtn() {
  channelsFlag.value = "";
  channelsOneFlag.value = "";
  channelsTwoFlag.value = "";
  channelsThreeFlag.value = "";
  categoryOneFlag.value = [];
  categoryTwoFlag.value = [];
  twoChannelsData.value = [];
  threeChannelsData.value = [];

  confirmBtn();
}

function confirmBtn() {
  filterForm.value.channelsType = channelsFlag.value;
  filterForm.value.channelsOne = channelsOneFlag.value;
  filterForm.value.channelsTwo = channelsTwoFlag.value;
  filterForm.value.channelsThree = channelsThreeFlag.value;

  filterForm.value.oneCategory = categoryOneFlag.value.join(",");
  filterForm.value.twoCategory = categoryTwoFlag.value.join(",");
  onSearch();
  showPicker.value = false;
}

function onSearch() {
  emits("search", filterForm.value);
}

dictListAll("ent_type").then(res => {
  ent_type.value = res.data || [];
});

dictListAll("custom_type").then(res => {
  custom_type.value = res.data || [];
});

dictListAll("company_type").then(res => {
  company_type.value = res.data || [];
});

dictListAll("store_channels").then(res => {
  storeChannels.value = res.data || [];
});

dictListAll("agency_channels").then(res => {
  agencyChannels.value = res.data || [];
});

dictListAll("daily_category").then(res => {
  dailyCategory.value = res.data || [];
});

dictListAll("major_category").then(res => {
  majorCategory.value = res.data || [];
});

dictListAll("factory_category").then(res => {
  factoryCategory.value = res.data || [];
});

dictListAll("provider_category").then(res => {
  providerCategory.value = res.data || [];
});

dictListAll("talent_org_category").then(res => {
  talentOrgCategory.value = res.data || [];
});
</script>
<style lang="less" scoped>
.filter-comp {
  .filter-op {
    display: flex;
    justify-content: flex-end;
    margin-top: 0.4rem;
  }

  .filter-btn {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;

    .clear-btn {
      color: #969799;
    }

    .confirm-btn {
      color: #1989fa;
    }

    .title {
      font-weight: 700;
      font-size: 1.1rem;
    }
  }

  .filter-popup {
    height: 86vh;
    background-color: #fff;
    overflow: auto;

    .classify-box {
      margin: 0.4rem 0;
      padding-left: 1rem;

      .classify-label {
        width: 5rem;
        margin: 0.4rem 0;
        font-weight: 700;
        line-height: 2rem;
        color: #2e3244;
      }

      .classify-main {
        flex: 1;
        display: flex;
        flex-wrap: wrap;
        margin-bottom: 0.4rem;

        .classify-item {
          margin-right: 1rem;
          margin-bottom: 1rem;
          padding: 0 1rem;
          line-height: 2rem;
          background-color: #f9f9f9;
          border-radius: 1rem;

          &.active {
            color: #ff4350;
            background: #ffeae8;
          }
        }
      }
    }
  }
}
</style>
